<template>
  <div>
    <activity-header :name="name"></activity-header>
    <div class="header-main">
      <img :src="poster" class="poster" @click="priviewImag(poster)" />
      <div class="info">
        <div class="top">
          <div class="title">{{ fullname }}</div>
          <div class="star-score">
            <span class="score">暂无评分</span>
            <ul class="star">
              <li><img src="../assets/star.png" /></li>
              <li><img src="../assets/star.png" /></li>
              <li><img src="../assets/star.png" /></li>
              <li><img src="../assets/star.png" /></li>
              <li><img src="../assets/star.png" /></li>
            </ul>
          </div>
          <div class="price-line">
            <span class="price">{{ lowprice }}</span>
            <span class="qi">元起</span>
          </div>
        </div>
      </div>
      <div class="concern-comment">
        <div class="comment" @click="changeSay">
          <img src="../assets/会话框.png" />
          <span>评论</span>
        </div>
        <div class="concern" @click="changeWant">
          <img src="../assets/爱心.png" />
          <span>想看</span>
        </div>
      </div>
    </div>
    <div class="header-bottom">
      <div class="time-range">{{ timeRange }}</div>
      <div class="venue">
        <div class="inner">
          <div class="name">{{ venueName }}</div>
        </div>
        <div class="icon">
          <i class="iconfont icon-map"></i>
        </div>
      </div>
      <div class="ticket-info">
        <div class="text">
          <van-cell is-link @click="showPopup">购票须知</van-cell>
          <van-popup v-model:show="show" position="bottom">
            <van-tabs v-model:active="active" @click-tab="onClickTab">
              <van-tab title="入场凭证">
                <div class="tip-detail__item">
                  <div class="tip-detail__item-title">实体票</div>
                  <div class="tip-detail__item-desc">
                    本项目支持凭实体票入场，支持以下取票方式：<br />
                    - 快递配送:运费10元(V4及以上会员包邮)，顺丰发货。<br />
                    -
                    现场取票:票牛工作人员将在演出开场前1小时至现场派票。工作人员联系方式、具体取票地点将在演出当天以短信通知发送至预留的手机号。
                    <br />
                  </div>
                </div>
              </van-tab>
              <van-tab title="观演须知">
                <div class="tip-detail__desc">
                  <div class="tip-detail__item">
                    <div class="item-title">限购说明</div>
                    <div class="item-desc">每单限购六张</div>
                  </div>
                  <div class="tip-detail__item">
                    <div class="item-title">座位类型</div>
                    <div class="item-desc">请按门票对应座位,有序对号入座</div>
                  </div>
                  <div class="tip-detail__item">
                    <div class="item-title">儿童入场提示</div>
                    <div class="item-desc">1.2以上凭票入场,1.2以下谢绝入场</div>
                  </div>
                </div>
              </van-tab>
            </van-tabs>
          </van-popup>
        </div>
      </div>
      <div class="service-info">
        <div class="items">
          <div class="text">平台保障</div>
          <div class="service-item">
            <img src="../assets/对勾.png" />
            <span>无票赔付</span>
          </div>
          <div class="service-item">
            <img src="../assets/对勾.png" />
            <span>出票保真</span>
          </div>
          <div class="service-item">
            <img src="../assets/对勾.png" />
            <span>配送保障</span>
          </div>
        </div>
      </div>
    </div>
    <activity-footer></activity-footer>
  </div>
</template>
<script>
import { ImagePreview } from 'vant';
import { ref } from "vue";
import activityHeader from "../components/activity/ActivityHeader.vue";
import activityFooter from "../components/activity/ActivityFooter.vue";
import "vant/es/toast/style";
import { Toast } from "vant";
export default {
  setup() {
    const active = ref(0);
    const show = ref(false);
    const showPopup = () => {
      show.value = true;
    };

    return {
      show,
      showPopup,
      active,
    };
  },
  data() {
    return {
      name: "",
      poster: "",
      fullname: "",
      lowprice: "",
      timeRange: "",
      venueName: "",
    };
  },
  created() {
    // console.log('to',JSON.parse(this.$route.query.data));
    this.data = JSON.parse(this.$route.query.data);
    this.name = this.data.name;
    this.poster = this.data.poster;
    this.fullname = this.data.fullName;
    this.lowprice = this.data.lowPrice;
    this.timeRange = this.data.timeRange;
    this.venueName = this.data.venueName;
    console.log(this.data);
  },
  methods: {
    changeWant() {
      Toast.success("成功加入到想看");
    },
    changeSay() {
      this.$router.push("/search");
    },
    priviewImag(poster) {
      ImagePreview({
        images: [
         poster
        ],
        closeable: true,
      });
    },
  },
  components: {
    activityHeader,
    activityFooter,
  },
};
</script>
<style lang="scss" scoped>
.header-main {
  position: relative;
  overflow: hidden;
  background-color: #262626;
  font-size: 14px;
}
.header-main .poster {
  float: left;
  height: 128px;
  width: 96px;
  margin: 20px 0 0 15px;
}
.info {
  position: relative;
  box-sizing: border-box;
  margin: 20px 15px 16px 127px;
  min-height: 128px;
}
.top {
  margin-bottom: 10px;
  margin-right: 15px;
}
.title {
  font-size: 17px;
  font-weight: 700;
  min-height: 44px;
  line-height: 22px;
  color: #fff;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 13px;
}
.star-score {
  margin-bottom: 18px;
  height: 20px;
  li {
    margin-right: 2px;
    display: inline;
    float: none;
    img {
      width: 8px;
      height: 8px;
      margin-bottom: 1px;
    }
  }
}
.score {
  font-size: 14px;
  color: #fdb146;
  margin-right: 6px;
}
ul {
  display: inline-block;
  overflow: visible;
  margin-right: 3px;
}
.price-line {
  display: flex;
  align-items: center;
  color: #fff;
}
.price {
  font-size: 24px;
  margin-right: 3px;
}
.qi {
  font-size: 12px;
}
.concern-comment {
  color: #fff;
  margin: 16px 15px;
}
.comment {
  float: right;
  margin-left: 4%;
  background: hsla(0, 0%, 100%, 0.1);
  height: 30px;
  border-radius: 3px;
  line-height: 30px;
  text-align: center;
  font-size: 14px;
  width: 48%;
  box-sizing: border-box;
  img {
    width: 15px;
    height: 14px;
    vertical-align: -1px;
    margin-bottom: -2px;
    margin-right: 4px;
  }
}
.concern {
  overflow: hidden;
  background: hsla(0, 0%, 100%, 0.1);
  height: 30px;
  border-radius: 3px;
  line-height: 30px;
  text-align: center;
  font-size: 14px;
  width: 48%;
  box-sizing: border-box;
  img {
    width: 15px;
    height: 14px;
    vertical-align: -1px;
    margin-bottom: -2px;
    margin-right: 4px;
  }
}
.header-bottom {
  padding-left: 14px;
}
.time-range {
  font-size: 15px;
  padding-top: 24px;
}
.venue {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #f5f5f5;
  padding-bottom: 15px;
  padding-top: 16px;
  line-height: 1.2;
}
.inner {
  margin-right: 11px;
  overflow: hidden;
  flex: 1;
}
.name {
  font-size: 15px;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.icon {
  padding: 0 22px;
  border-left: 1px solid #f5f5f5;
}
.icon-map {
  font-size: 24px;
  color: red;
}
.ticket-info .text {
  font-size: 13px;
  color: #333;
}
.icon-arrow-right {
  float: right;
  margin-right: 22px;
}
.service-info {
  // position: relative;
  padding: 16px 0;
  border-bottom: 1px solid #f5f5f5;
  display: flex;
  align-items: center;
}
.service-info .items {
  display: flex;
}
.service-item {
  margin-right: 10px;
  img {
    width: 12px;
    margin-right: 4px;
  }
  span {
    font-size: 13px;
  }
}
.service-info .text {
  margin-right: 10px;
  font-size: 13px;
  color: #333;
}
.tip-detail__item-desc {
  height: 300px;
}
.tip-detail__item-title {
  color: #333;
  padding-left: 20px;
  margin-bottom: 8px;
  background-image: url(../assets/对勾.png);
  background-size: 12px 12px;
  background-position: 0;
  background-repeat: no-repeat;
}
.tip-detail__item-desc {
  font-size: 12px;
  color: #999;
  padding-left: 20px;
  height: 285px;
}
.tip-detail__desc {
  color: #999;
  padding: 0 14px;
  overflow: auto;
  height: 335px;
}
.tip-detail__item {
  margin-bottom: 24px;
}
.item-title {
  color: #333;
  padding-left: 20px;
  margin-bottom: 8px;
  background-image: url(../assets/对勾.png);
  background-size: 12px 12px;
  background-position: 0;
  background-repeat: no-repeat;
}
.item-desc {
  font-size: 12px;
  color: #999;
  padding-left: 20px;
}
.van-cell {
  padding-left: 0;
  padding-top: 0;
  padding-bottom: 0;
}

</style>